<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    :dialogWidth="dialogWidth"
  >
    <template #searchPanel>
      <el-row :gutter="20">
        <search-panel
          @search="search"
          :showAddButton="true"
          addTitle="新增客户"
          :showExportButton="true"
          @insert="addService"
          @export="handleDataExport('Client','客户数据')"
          :excelPer="'admin'"
          :addPer="'client:save'"
          :selectPer="'client:page'"
        >
          <job-shop
            v-model="searchOptions.storeId"
            placeholder="所属门店"
          />
          <el-select
            clearable
            style="width: 200px"
            v-model="searchOptions.memberLevelDictId"
            placeholder="会员等级"
          >
            <el-option
              v-for="item in dict['客户会员等级']"
              :key="item.index"
              :value="item.value"
              :label="item.text"
            />
          </el-select>
          <el-select
            clearable
            style="width: 200px"
            v-model="searchOptions.clientType"
            placeholder="客户类型"
          >
            <el-option
              v-for="item in dict['客户类型']"
              :key="item.index"
              :value="item.value"
              :label="item.text"
            />
          </el-select>
          <el-input
            clearable
            style="width: 200px"
            v-model="searchOptions.clientNameAndPhone"
            placeholder="请输入客户姓名/手机号"
          />
        </search-panel>
      </el-row>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :width="160"
        :isShowPage="true"
        :total-count="totalCount"
        @row-dblclick="rowDblclick"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template #action="{ row }">
          <!-- <i class="el-icon-truck" title="车辆详情" v-permission="'314'" style="cursor: pointer" @click="carInfo(row)"></i>
          <i class="el-icon-search" title="客户详情" v-permission="'315'" style="margin-left: 15px;cursor: pointer" @click="handleDataInsert('客户详情')"></i> -->
          <i
            class="el-icon-edit"
            title="修改"
            v-permission="'client:update'"
            style="margin-left: 15px; cursor: pointer"
            @click="interestsInfo(row, 0)"
          ></i>
          <i
            class="el-icon-delete"
            title="删除"
            v-permission="'client:del'"
            style="color: red; margin-left: 15px; cursor: pointer"
            @click="handleDataDelete(row)"
          ></i>
        </template>
      </data-table>
      <!-- <el-button type="primary" @click="handleDataInsert('客户详情')"
        >客户详情</el-button
      > -->
    </template>

    <template #dialog>
      <dialog-view-detail
        @operate="handleDataOperate"
        :id="viewInfo.id"
        @oncancel="dialogClose"
      />
    </template>
  </base-layout>
</template>

<script>
import { clientList, deleteClient } from '@/api/after-sale/client/client'
import baseMixin from '@/mixins/base'
import { parseTimeToYMDHMS, exportExcel, getDict } from '@/utils'
import DialogViewDetail from './view/index.vue'
import { JobShop } from '@/components/index'

export default {
  name: 'clientManage',
  components: {
    DialogViewDetail,
    JobShop,
  },
  mixins: [
    baseMixin({
      findData: clientList,
      deleteData: deleteClient,
      dataName: ['content', 'totalRecords'],
      isAdd: false,
      idName: 'id',
      format (res) {
        return res.map((data) => {
          // data.createTime = parseTimeToYMDHMS(data.createTime);
          // if(data.lastLoginTime ){
          //   data.lastLoginTime = parseTimeToYMDHMS(data.lastLoginTime);
          // }
          // if(data.birthday ){
          //   data.birthday = parseTime(data.birthday);
          // }
          return data
        })
      },
    }),
  ],
  data () {
    return {
      dict: {},
      dialogVisible: false,
      communitys: [],
      dialogWidth: '1200px',
      service: {},
      isAdd: false,
      tableColumnAttributes: [
        { name: '所属门店', value: 'storeName', type: 'text' },
        { name: '客户名称', value: 'clientName', type: 'text' },
        { name: '手机号', value: 'phone', type: 'text' },
        { name: '驾驶证号', value: 'jszNum', type: 'text' },
        { name: '性别', value: 'genderCst', type: 'text' },
        { name: '会员等级', value: 'memberLevelDictValue', type: 'text' },
        { name: '客户来源', value: 'clientSource', type: 'text' },
        { name: '客户类型', value: 'clientType', type: 'text' },
        { name: '客户车辆', value: 'carNum', type: 'text' },
        { name: '备注', value: 'remark', type: 'text' },
        { name: '最近到店', value: 'reachStoreTime', type: 'text' },
        { name: '录入时间', value: 'createTime', type: 'text' },
        { name: '录入人', value: 'createUser', type: 'text' },
      ],
      viewInfo: {}, //查看详情时保存的row
    }
  },
  async created () {
    this.dict = getDict(['客户类型', '客户会员等级'], "")
  },
  methods: {
    search (form) {
      this.currentPage = 1
      this.setTableData()
    },
    /**
     * 修改
     */
    interestsInfo (row, type) {
      // this.$store.state.customerInfoId = row.id
      // this.$store.state.customerInfotype = type
      this.$router.push({
        path: '/client-manage/client-edit',
        query: {
          customerInfoId: row.id,
          customerInfotype: type,
        },
      })
    },
    getAdverts (row) {
      getcategory(row.id).then((result) => {
        if (result.code == '0') {
          this.advert = result.data
          this.handleDataChange(row)
        }
      })
    },
    /**
     * 新增
     */
    addService (row) {
      this.$router.push({
        path: '/client-manage/client-create',
        query: {
          customerInfotype: 0,
        },
      })
    },
    rowDblclick (row) {
      this.viewInfo = row
      this.handleDataInsert('客户详情')
    },
    //
    carInfo (row) {
      this.$store.state.customerCarInfoId = row.id
      this.$store.state.carInfoId = ''
      this.$store.state.carInfotype = 0
      this.$router.push({ path: '/client/carInfo' })
    },
  },
}
</script>

<style lang="scss" scoped>
.vLine {
  border-left: solid 3px black;
  height: 16px;
  vertical-align: bottom;
  display: inline-block;
}
</style>
